<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:o="http://omnifaces.org/ui"
                xmlns:jsf="http://xmlns.jcp.org/jsf">
    <!-- View Mode -->
    <div class="panel-group" jsf:rendered="${empty editMode  or managePage}">
        <o:importFunctions type="edu.harvard.iq.dataverse.util.MarkupChecker" />
        <ui:repeat value="#{metadataBlocks}"
                   var="metadataBlockVal" varStatus="block">
            <div class="panel panel-default">
                <div data-toggle="collapse" data-target="#panelCollapse#{block.index}" class="panel-heading text-info">
                    #{metadataBlockVal.key.localeDisplayName} &#160;<span class="glyphicon #{block.first?'glyphicon-chevron-up':'glyphicon-chevron-down'}"/>
                </div>
                <div id="panelCollapse#{block.index}" class="collapse #{block.first?'in':''}">
                    <div class="panel-body metadata-panel-body">
                        <ui:fragment rendered="#{block.index == '0' and datasetPage}">
                            <div class="form-group">
                                <label for="metadata_persistentId" class="col-sm-3 control-label">
                                    #{bundle['dataset.metadata.persistentId']}
                                    <span class="glyphicon glyphicon-question-sign tooltip-icon"
                                          data-toggle="tooltip" data-placement="auto right" data-original-title="#{bundle['dataset.metadata.persistentId.tip']}"></span>
                                </label>
                                <div class="col-sm-9">
                                    #{globalId}
                                </div>
                            </div>
                            <ui:fragment rendered="#{!empty altPID}">
                            <div class="form-group">
                                <label for="metadata_persistentId" class="col-sm-3 control-label">
                                    #{bundle['dataset.metadata.alternativePersistentId']}
                                    <span class="glyphicon glyphicon-question-sign tooltip-icon"
                                          data-toggle="tooltip" data-placement="auto right" data-original-title="#{bundle['dataset.metadata.alternativePersistentId.tip']}"></span>
                                </label>
                                <div class="col-sm-9">
                                    #{altPID}
                                </div>
                            </div>
                            </ui:fragment>
                            <div class="form-group" jsf:rendered="#{!empty publicationDate}">
                                <label for="metadata_publicationDate" class="col-sm-3 control-label">
                                    #{bundle['dataset.metadata.publicationDate']}
                                    <span class="glyphicon glyphicon-question-sign tooltip-icon"
                                          data-toggle="tooltip" data-placement="auto right" data-original-title="#{bundle['dataset.metadata.publicationDate.tip']}"></span>
                                </label>
                                <div class="col-sm-9">
                                    #{publicationDate}
                                </div>
                            </div>
                        </ui:fragment>
                        <ui:repeat value="#{metadataBlockVal.value}" var="dsf">
                            <div class="form-group">
                                <label for="metadata_#{dsf.datasetFieldType.name}" class="col-sm-3 control-label">
                                    #{dsf.datasetFieldType.localeTitle}
                                    <span class="glyphicon glyphicon-question-sign tooltip-icon"
                                          data-toggle="tooltip" data-placement="auto right" data-original-title="#{dsf.datasetFieldType.localeDescription}"></span>
                                </label>
                                <!-- Primitive datasetFields -->
                                <div class="col-sm-9" jsf:rendered="#{dsf.datasetFieldType.primitive}">   
                                    <h:outputText value="#{dsf.displayValue}" rendered="#{!dsf.datasetFieldType.allowMultiples}"
                                                  escape="#{dsf.datasetFieldType.isEscapeOutputText()}"/>
                                    <ui:repeat value="#{dsf.values}" var="value" varStatus="loop" rendered="#{dsf.datasetFieldType.allowMultiples}">
                                        <h:outputText value="#{loop.first?'':'; '}#{ value }"
                                                      escape="#{dsf.datasetFieldType.isEscapeOutputText()}"/>
                                    </ui:repeat>
                                </div>
                                <!-- Compound datasetFields -->
                                <div class="col-sm-9" jsf:rendered="#{dsf.datasetFieldType.compound}">
                                    <ui:fragment rendered="#{dsf.datasetFieldType.name == 'datasetContact'}">
                                        <p class="help-block">
                                            <h:outputText value="#{bundle['dataset.contact.tip']}"/>
                                        </p>
                                    </ui:fragment>
                                    <ui:repeat value="#{dsf.datasetFieldCompoundValues}" var="compoundValue">
                                        <ui:repeat value="#{compoundValue.displayValueMap.entrySet().toArray()}" var="cvPart" varStatus="partStatus">                                           
                                            <h:outputText value="#{dsf.datasetFieldType.displayFormat} " rendered="${!partStatus.first}"/>
                                            <h:outputText value="#{cvPart.value}"
                                                          escape="#{cvPart.key.datasetFieldType.isEscapeOutputText()}"/>
                                        </ui:repeat>
                                        <br/>
                                    </ui:repeat>
                                </div>
                            </div>
                        </ui:repeat>
                    </div>
                </div>
            </div>
        </ui:repeat>
    </div>
    <!-- Edit Mode -->
    <ui:fragment rendered="${(!empty editMode)}">
        <p:fragment id="editMetadataFragement" >
        <o:importFunctions type="java.util.Collections" />
        <div class="panel-group">
            <ui:repeat value="#{metadataBlocks}" var="metadataBlockVal" varStatus="block">
                <div class="panel panel-default" jsf:rendered="#{(editMode == 'METADATA' or metadataBlockVal.key.displayOnCreate or !metadataBlockVal.key.isEmpty()
                                                                 or metadataBlockVal.key.isHasRequired())
                                                                 or (!datasetPage)}">
                    <div data-toggle="collapse" data-target="#panelCollapse#{block.index}" class="panel-heading text-info">
                        #{metadataBlockVal.key.localeDisplayName} <span class="glyphicon #{block.first || editMode == 'CREATE'  ? 'glyphicon-chevron-up' : 'glyphicon-chevron-down'}"/>
                    </div>
                    <div id="panelCollapse#{block.index}" class="collapse #{block.first || editMode == 'CREATE' ? 'in' : ''}">
                        <div class="panel-body">
                            <ui:repeat value="#{metadataBlockVal.value}" var="dsf">
                                <ui:fragment rendered="#{((editMode == 'METADATA'
                                                         or dsf.datasetFieldType.displayOnCreate or !dsf.isEmpty() or dsf.required or dsf.datasetFieldType.hasRequiredChildren) and dsf.include)
                                                         or (!datasetPage and dsf.include)}">
                                    <div class="form-group">
                                        <label for="metadata_#{dsf.datasetFieldType.name}" class="col-sm-3 control-label">
                                            #{dsf.datasetFieldType.localeTitle}
                                            <h:outputText styleClass="glyphicon glyphicon-asterisk text-danger" value="" rendered="#{dsf.required  or dsf.datasetFieldType.hasRequiredChildren }" />
                                            <span class="glyphicon glyphicon-question-sign tooltip-icon"
                                                  data-toggle="tooltip" data-placement="auto right" data-original-title="#{dsf.datasetFieldType.localeDescription}"></span>
                                        </label>
                                        <!-- Primitive fields -->
                                        <p:fragment id="editPrimitiveValueFragment" rendered="#{dsf.datasetFieldType.primitive}">
                                            <p:autoUpdate/>
                                            <div class="form-group">
                                                <ui:remove><!-- There is an issue with the dynamic +/- and the primefaces autoupdate where they are not working
                                                    well together for the primitive fields, but are for the compound fields. So as a workaround for the primitive,
                                                    we wrap them in a ui:repeat that iterates on a single list. Note: dummyVar is never used--></ui:remove>
                                                <ui:repeat value="#{Collections:singletonList('')}" var="dummyVar">
                                                    <div class="form-col-container col-sm-12">
                                                        <ui:repeat value="#{dsf.datasetFieldValues}" var="dsfv" varStatus="valCount">
                                                            <div class="form-group dataset-field-values">
                                                                <div class="form-col-container col-sm-9 edit-field">
                                                                    <ui:include src="datasetFieldForEditFragment.xhtml">
                                                                        <ui:param name="dsfv" value="#{dsfv}"/>
                                                                        <ui:param name="dsfvIndex" value="#{valCount.index}"/>
                                                                    </ui:include>
                                                                </div>
                                                                <!-- Add / Remove buttons -->
                                                                <div class="col-xs-3 field-add-delete" jsf:rendered="#{dsf.datasetFieldType.allowMultiples and !dsf.datasetFieldType.controlledVocabulary}">
                                                                    <p:commandLink title="#{bundle.add}"
                                                                                   styleClass="btn btn-default btn-sm bootstrap-button-tooltip #{dsf.datasetFieldType.compound ? 'compound-field-btn' : ''}"
                                                                                   actionListener="#{dsf.addDatasetFieldValue(valCount.index + 1)}"
                                                                                   update=":#{p:resolveClientIds('@id(editPrimitiveValueFragment)', view)}"
                                                                                   oncomplete="javascript:bind_bsui_components();">
                                                                        <span class="glyphicon glyphicon-plus no-text"/>
                                                                    </p:commandLink>
                                                                    <p:commandLink title="#{bundle.delete}"
                                                                                   styleClass="btn btn-default btn-sm bootstrap-button-tooltip #{dsf.datasetFieldType.compound ? 'compound-field-btn' : ''}"
                                                                                   rendered="#{dsf.datasetFieldValues.size() > 1}"
                                                                                   actionListener="#{dsf.removeDatasetFieldValue(valCount.index)}"
                                                                                   update=":#{p:resolveClientIds('@id(editPrimitiveValueFragment)', view)}"
                                                                                   oncomplete="javascript:bind_bsui_components();">
                                                                        <span class="glyphicon glyphicon-minus no-text"/>
                                                                    </p:commandLink>
                                                                </div>
                                                            </div>
                                                        </ui:repeat>
                                                        <ui:fragment rendered="#{dsf.datasetFieldType.controlledVocabulary}">
                                                            <p:selectOneMenu value="#{dsf.singleControlledVocabularyValue}" converter="controlledVocabularyValueConverter" style="width: auto !important; max-width:100%; min-width:200px;" styleClass="form-control primitive"
                                                                             rendered="#{!dsf.datasetFieldType.allowMultiples}">
                                                                <f:selectItem itemLabel="#{bundle.select}" itemValue="" noSelectionOption="true"/>
                                                                <f:selectItems value="#{dsf.datasetFieldType.controlledVocabularyValues}" var="cvv" itemLabel="#{cvv.localeStrValue}" itemValue="#{cvv}"/>
                                                            </p:selectOneMenu>
                                                            <div class="ui-inputfield form-control select-scroll-block" jsf:rendered="#{dsf.datasetFieldType.allowMultiples}">
                                                                <p:selectManyCheckbox value="#{dsf.controlledVocabularyValues}" converter="controlledVocabularyValueConverter"
                                                                                      layout="pageDirection">
                                                                    <f:selectItem itemLabel="#{bundle.select}" class="chkbox-label-margin" itemValue="" noSelectionOption="true"/>
                                                                    <f:selectItems value="#{dsf.datasetFieldType.controlledVocabularyValues}" var="cvv" itemLabel="#{cvv.localeStrValue}" itemValue="#{cvv}"/>
                                                                </p:selectManyCheckbox>
                                                            </div>
                                                            <div class="alert-danger" jsf:rendered="#{!empty dsf.validationMessage}">
                                                                <strong>#{dsf.validationMessage}</strong>
                                                            </div>
                                                        </ui:fragment>
                                                    </div>
                                                </ui:repeat>
                                            </div>
                                        </p:fragment>
                                        <!-- Compound fields -->
                                        <p:fragment id="editCompoundValueFragment" rendered="#{dsf.datasetFieldType.compound}">
                                            <p:autoUpdate/>
                                            <div class="form-group form-col-container col-sm-9 dataset-field-values">
                                                <ui:repeat value="#{dsf.datasetFieldCompoundValues}" var="compoundValue" varStatus="valCount">
                                                    <div class="form-group form-col-container col-sm-9 edit-compound-field">
                                                        <!-- Sub Fields -->
                                                        <ui:repeat value="#{compoundValue.childDatasetFields}" var="subdsf">
                                                            <div class="form-col-container #{(subdsf.datasetFieldType.fieldType == 'TEXTBOX') ? 'col-sm-12' : 'col-sm-6'}">
                                                                <ui:fragment rendered="#{subdsf.datasetFieldType.name == 'dsDescriptionValue'}">
                                                                    <p class="help-block">
                                                                        <h:outputFormat value="#{bundle.htmlAllowedMsg}" escape="false">
                                                                            <f:param value="#{bundle.htmlAllowedTags}"/>
                                                                        </h:outputFormat>
                                                                    </p>
                                                                </ui:fragment>
                                                                <label class="control-label" for="metadata_#{subdsf.datasetFieldType.name}">
                                                                    #{subdsf.datasetFieldType.localeTitle}
                                                                    <h:outputText styleClass="glyphicon glyphicon-asterisk text-danger" value="" rendered="#{subdsf.required}" />
                                                                    <span class="glyphicon glyphicon-question-sign tooltip-icon"
                                                                          data-toggle="tooltip" data-placement="auto right" data-original-title="#{subdsf.datasetFieldType.localeDescription}"></span>
                                                                </label>
                                                                <ui:fragment rendered="#{!subdsf.datasetFieldType.controlledVocabulary}">
                                                                    <ui:include src="datasetFieldForEditFragment.xhtml">
                                                                        <ui:param name="dsfv" value="#{subdsf.singleValue}"/>
                                                                        <ui:param name="dsfvIndex" value="0"/>
                                                                    </ui:include>
                                                                </ui:fragment>
                                                                <!-- MOVED SELECT ONE TO dataFieldForEdit -->
                                                                <div jsf:rendered="#{subdsf.datasetFieldType.controlledVocabulary}">
                                                                    <p:selectOneMenu value="#{subdsf.singleControlledVocabularyValue}" converter="controlledVocabularyValueConverter" style="width: auto !important; max-width:100%; min-width:200px;"
                                                                                     rendered="#{!subdsf.datasetFieldType.allowMultiples}">
                                                                        <f:selectItem itemLabel="#{bundle.select}" itemValue="" noSelectionOption="true"/>
                                                                        <f:selectItems value="#{subdsf.datasetFieldType.controlledVocabularyValues}" var="cvv" itemLabel="#{cvv.localeStrValue}" itemValue="#{cvv}" />
                                                                    </p:selectOneMenu>
                                                                    <div class="ui-inputfield form-control select-scroll-block" jsf:rendered="#{subdsf.datasetFieldType.allowMultiples}">
                                                                        <p:selectManyCheckbox value="#{subdsf.controlledVocabularyValues}" converter="controlledVocabularyValueConverter"
                                                                                              layout="pageDirection">
                                                                            <f:selectItems value="#{subdsf.datasetFieldType.controlledVocabularyValues}" var="cvv" itemLabel="#{cvv.localeStrValue}" itemValue="#{cvv}" />
                                                                        </p:selectManyCheckbox>
                                                                    </div>
                                                                    <div class="alert-danger" jsf:rendered="#{!empty subdsf.validationMessage}">
                                                                        <strong>#{subdsf.validationMessage}</strong>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </ui:repeat>
                                                    </div>
                                                    <div class="col-sm-3 field-add-delete" jsf:rendered="#{dsf.datasetFieldType.allowMultiples and !dsf.datasetFieldType.controlledVocabulary}">
                                                        <p:commandLink title="#{bundle.add}"
                                                                       styleClass="btn btn-default btn-sm bootstrap-button-tooltip #{dsf.datasetFieldType.compound ? 'compound-field-btn' : ''}"
                                                                       actionListener="#{dsf.addDatasetFieldCompoundValue(valCount.index + 1)}"   
                                                                       update=":#{p:resolveClientIds('@id(editCompoundValueFragment)', view)}"
                                                                       oncomplete="javascript:bind_bsui_components();">
                                                            <span class="glyphicon glyphicon-plus no-text"/>
                                                        </p:commandLink>
                                                        <p:commandLink title="#{bundle.delete}"
                                                                       styleClass="btn btn-default btn-sm bootstrap-button-tooltip #{dsf.datasetFieldType.compound ? 'compound-field-btn' : ''}"
                                                                       rendered="#{dsf.datasetFieldCompoundValues.size() > 1}"
                                                                       actionListener="#{dsf.removeDatasetFieldCompoundValue(valCount.index)}"
                                                                       update=":#{p:resolveClientIds('@id(editCompoundValueFragment)', view)}"
                                                                       oncomplete="javascript:bind_bsui_components();">
                                                            <span class="glyphicon glyphicon-minus no-text"/>
                                                        </p:commandLink>
                                                    </div>
                                                </ui:repeat>
                                            </div>
                                            <!--/p:autoUpdate-->    
                                        </p:fragment>
                                    </div>
                                </ui:fragment>
                            </ui:repeat>
                        </div>
                    </div>
                </div>
            </ui:repeat>
        </div>
        </p:fragment>
    </ui:fragment>
</ui:composition>